<script lang="ts">
import {defineComponent, PropType} from "@vue/runtime-core";
//Sprite坐标系是从左下角开始的
export default defineComponent({
  name: 'Sprite',
  props: {
    position: { type: Object as PropType<{ x: number; y: number }>, required: true },
    size: { type: Object as PropType<{ width: number; height: number }>, required: true },
    imageSrc: { type: String, required: true }
  },
  setup(props) {
    return {
      ...props
    };
  }
});
</script>

<template>
  <div
      class="sprite"
      :style="{
      left: position.x,
      bottom: position.y,
      width: size.width,
      height: size.height,
      backgroundImage: imageSrc
    }"
  ></div>
</template>

<style scoped>
.sprite {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>